<template>
    <el-table v-loading="loading" :data="bannerList" style="width: 100%">
    <el-table-column prop="alt" label="描述" width="180" />
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img :src="scope.row.img" alt="" style="width: 100px; height: 100px" />
      </template>
    </el-table-column>
    <el-table-column prop="link" label="说明" />
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {getBannerList, bannerDelete} from "@/api/api";
export default{
    data(){
        return{
            bannerList:[],
            loading:false,
        };
    },
    created(){
        this.initBannerList();
    },
    methods:{
        async initBannerList(){
            this.loading=true;
            const res=await getBannerList();
            this.bannerList=res.data;
            this.loading=false
        },
        async handleDelete(index,row){
            const res=await bannerDelete(row.bannerid);
            this.$message.success(res.message);
            this.initBannerList();
        }
    }
};
</script>

<style></style>